{% extends 'charts/base.html' %}

{% block options %}

{% endblock %}

{% block sidebar %}
    <div class="btn-group btn-corner" id="next_btn">
        <button class="btn btn-info next_frequency" value="0" data-frequency="-" disabled>-</button>
    </div>
    <hr/>

    <form class="back_form">
        <div>
            <button class="btn btn-info form_submit" type="submit">
                开始回放
            </button>
        </div>
        <div>
            <label for="form-field-mask-1">
                市场选择
            </label>
            <div class="input-group">
                <select class="form-control" name="market">
                    <option value="currency" selected>数字货币</option>
                    <option value="a">沪深股市</option>
                    <option value="hk">香港股市</option>
                    <option value="futures">期货市场</option>
                </select>
            </div>
        </div>
        <div>
            <label for="form-field-mask-1">
                代码
            </label>
            <div class="input-group">
                <input type="text" placeholder="代码" name="code" value="BTC/USDT"/>
            </div>
        </div>
        <div>
            <label for="form-field-mask-1">
                周期<small class="text-success">英文 , 分割的多个周期</small>
            </label>
            <div class="input-group">
                <input type="text" placeholder="周期" name="frequencys" value="30m,5m"/>
            </div>
        </div>
        <div>
            <label for="form-field-mask-1">
                开始时间
            </label>
            <div class="input-group">
                <input type="text" class="form-control datetime" value="2022-01-01 00:00:00" name="start"/>
                <span class="input-group-addon"><i class="fa fa-clock-o bigger-110"></i></span>
            </div>
        </div>
        <div>
            <label for="form-field-mask-1">
                结束时间
            </label>
            <div class="input-group">
                <input type="text" class="form-control datetime" value="2022-02-28 00:00:00" name="end"/>
                <span class="input-group-addon"><i class="fa fa-clock-o bigger-110"></i></span>
            </div>
        </div>

        <div>
            <label for="form-field-mask-1 show-tooltips" title="顶底分型区间计算依据">
                分型区间
            </label>
            <div class="input-group">
                <select class="form-control" name="fx_qj">
                    <option value="fx_qj_k">分型内原始K线高低区间</option>
                    <option value="fx_qj_ck">分型内缠论K线高低区间</option>
                </select>
            </div>
        </div>

        <div>
            <label for="form-field-mask-1 show-tooltips" title="影响顶底包含是否成笔">
                分型包含关系
            </label>
            <div class="input-group">
                <select class="form-control" name="fx_bh">
                    <option value="fx_bh_yes">接受所有包含关系</option>
                    <option value="fx_bh_dingdi">顶不可以在底中</option>
                    <option value="fx_bh_diding">底不可以在顶中</option>
                    <option value="fx_bh_no">不允许所有包含关系</option>
                </select>
            </div>
        </div>

        <div>
            <label for="form-field-mask-1 show-tooltips" title="成笔条件，老笔顶底至少5跟缠论K线；新笔顶底至少4跟缠论K线，5跟原始K线；顶底成笔，只要有分型即可成笔">
                笔类型
            </label>
            <div class="input-group">
                <select class="form-control" name="bi_type">
                    <option value="bi_type_old">老笔</option>
                    <option value="bi_type_new">新笔</option>
                    <option value="bi_type_jdb">简单笔</option>
                    <option value="bi_type_dd">顶底成笔</option>
                </select>
            </div>
        </div>
        <div>
            <label for="form-field-mask-1 show-tooltips" title="笔的标准化，是否将笔的起始端点，画在笔内的最高最低之上">
                笔标准化
            </label>
            <div class="input-group">
                <select class="form-control" name="bi_bzh">
                    <option value="bi_bzh_yes">标准化（画在高低点）</option>
                    <option value="bi_bzh_no">不标准化（按照分型来）</option>
                </select>
            </div>
        </div>
        <div>
            <label for="form-field-mask-1 show-tooltips" title="之前的顶底分型不满足成笔，后一个分型高于或低于前一个分型，是否允许成笔">
                次高低分型
            </label>
            <div class="input-group">
                <select class="form-control" name="bi_fx_cgd">
                    <option value="bi_fx_cgd_yes">允许次高低分型成笔</option>
                    <option value="bi_fx_cgd_no">不允许次高低分型成笔</option>
                </select>
            </div>
        </div>

        <div>
            <label for="form-field-mask-1 show-tooltips" title="笔区间计算依据，会影响线段的特征序列计算">
                笔区间
            </label>
            <div class="input-group">
                <select class="form-control" name="bi_qj">
                    <option value="bi_qj_dd">笔的起始端点</option>
                    <option value="bi_qj_k">笔内原始K线最高最低</option>
                    <option value="bi_qj_ck">笔内缠论K线最高最低</option>
                </select>
            </div>
        </div>
        <div>
            <label for="form-field-mask-1 show-tooltips" title="影响线段的起始端点，标准化会导致一笔成段的出现">
                线段标准化
            </label>
            <div class="input-group">
                <select class="form-control" name="xd_bzh">
                    <option value="xd_bzh_no">严格按照特征序列顶底端点</option>
                    <option value="xd_bzh_yes">标准化线段画在高低端点</option>
                </select>
            </div>
        </div>

        <div>
            <label for="form-field-mask-1 show-tooltips" title="线段区间计算依据，影响走势类型的特征序列计算">
                线段区间
            </label>
            <div class="input-group">
                <select class="form-control" name="xd_qj">
                    <option value="xd_qj_dd">线段的起始端点</option>
                    <option value="xd_qj_ck">线段内缠论K线高低点</option>
                    <option value="xd_qj_k">线段内原始K线高低点</option>
                </select>
            </div>
        </div>
        <div>
            <label for="form-field-mask-1 show-tooltips" title="影响走势类型的起始端点，标准化会导致一段成走势类型的出现">
                走势类型标准化
            </label>
            <div class="input-group">
                <select class="form-control" name="zslx_bzh">
                    <option value="zslx_bzh_no">严格按照特征序列顶底端点</option>
                    <option value="zslx_bzh_yes">标准化走势画在高低端点</option>
                </select>
            </div>
        </div>
        <div>
            <label for="form-field-mask-1 show-tooltips" title="走势类型区间计算依据，影响走势类型中枢计算">
                走势类型区间
            </label>
            <div class="input-group">
                <select class="form-control" name="zslx_qj">
                    <option value="zslx_qj_dd">线段的起始端点</option>
                    <option value="zslx_qj_ck">线段内缠论K线高低点</option>
                    <option value="zslx_qj_k">线段内原始K线高低点</option>
                </select>
            </div>
        </div>
        <div>
            <label for="form-field-mask-1 show-tooltips" title="标准中枢，中枢维持，直到出现三类买卖点结束；段内中枢，只计算线段内出现的中枢">
                笔中枢类型
            </label>
            <div class="input-group">
                <select class="form-control" name="zs_bi_type">
                    <option value="zs_type_bz">标准中枢</option>
                    <option value="zs_type_dn">段内中枢</option>
                </select>
            </div>
        </div>
        <div>
            <label for="form-field-mask-1 show-tooltips" title="标准中枢，中枢维持，直到出现三类买卖点结束；段内中枢，只计算线段内出现的中枢">
                走势中枢类型
            </label>
            <div class="input-group">
                <select class="form-control" name="zs_xd_type">
                    <option value="zs_type_bz">标准中枢</option>
                    <option value="zs_type_dn">段内中枢</option>
                </select>
            </div>
        </div>
        <div>
            <label for="form-field-mask-1 show-tooltips" title="中枢区间，用来计算 高高、低低、中枢高点、中枢低点的依据">
                中枢区间
            </label>
            <div class="input-group">
                <select class="form-control" name="zs_qj">
                    <option value="zs_qj_dd">中枢元素的顶底端点</option>
                    <option value="zs_qj_ck">中枢元素的缠论K线高低点</option>
                    <option value="zs_qj_k">中枢元素的原始K线高低点</option>
                </select>
            </div>
        </div>
        <div>
            <label for="form-field-mask-1 show-tooltips" title="计算两个中枢的位置关系，来判断是上涨还是下跌趋势">
                中枢位置关系
            </label>
            <div class="input-group">
                <select class="form-control" name="zs_wzgx">
                    <option value="zs_wzgx_zgd">宽松比较(zg/zd)</option>
                    <option value="zs_wzgx_zggdd">较为宽松(zg/dd zd/gg)</option>
                    <option value="zs_wzgx_gd">严格比较(gg/dd)</option>
                </select>
            </div>
        </div>
    </form>

{% endblock %}

{% block content %}
    <div style="width: 100%;">
        <div class="btn-toolbar" role="toolbar" aria-label="周期选择">
            <div class="btn-group btn-group-sm" role="group" id="zq_high">
                <button type="button" class="btn btn-default" data-zq="-" disabled>-</button>
            </div>
        </div>
        <div id="kline_1" class="kline_chart" style="width:100%;min-height: 410px;"></div>
    </div>
    <div style="width: 100%;">
        <div class="btn-toolbar" role="toolbar" aria-label="周期选择">
            <div class="btn-group btn-group-sm" role="group" id="zq_low">
                <button type="button" class="btn btn-default" data-zq="-" disabled>-</button>
            </div>
        </div>
        <div id="kline_2" class="kline_chart" style="width:100%; min-height:410px;"></div>
    </div>
{% endblock %}


{% block js %}
    <script type="text/javascript">
        $(
            function () {
                $('.kline_chart').css('height', String((getClientHeight() - 49 - 20 - 45) / 2) + 'px');

                var chart_klines = {}
                var back_config = {}

                var chart_1 = echarts.init(document.getElementById('kline_1'), 'dark', {renderer: 'canvas'});
                var chart_2 = echarts.init(document.getElementById('kline_2'), 'dark', {renderer: 'canvas'});
                var zq_1 = '';
                var zq_2 = '';

                $('.back_form').submit(function () {
                    let frequencys = $('input[name=frequencys]').val().split(',')
                    if (frequencys.length < 2) {
                        alert('回放周期不能小于两个')
                        return false
                    }
                    back_config = $(this).serialize();
                    $('input').attr('disabled', true);
                    $('select').attr('disabled', true);
                    $('.form_submit').attr('disabled', true);

                    $('#next_btn').html('')
                    $('#zq_high').html('')
                    $('#zq_low').html('')
                    for (let i = 0; i < frequencys.length; i++) {
                        let f = frequencys[i]
                        $('#next_btn').append('<button class="btn btn-info next_frequency" value="0" data-frequency="' + f + '">' + f + '</button>  ')
                        $('#zq_high').append('<button type="button" class="btn btn-xs btn-default" data-zq="' + f + '">' + f + '</button>')
                        $('#zq_low').append('<button type="button" class="btn btn-xs btn-default" data-zq="' + f + '">' + f + '</button>')
                    }
                    zq_1 = frequencys[0]
                    zq_2 = frequencys[1]
                    fetchData_kline(frequencys[frequencys.length - 1]);
                    return false
                })

                // 下一个
                $("body").delegate('.next_frequency', 'click', function () {
                    let frequency = $(this).attr('data-frequency');
                    fetchData_kline(frequency);
                });
                // 周期选择
                $("body").delegate('#zq_high button', 'click', function () {
                    zq_1 = $(this).attr('data-zq');
                    $('#zq_high button').removeClass('active');
                    $(this).addClass('active');
                    chart_1.clear();
                    chart_1.setOption(chart_klines[zq_1]);
                });
                $("body").delegate('#zq_low button', 'click', function () {
                    zq_2 = $(this).attr('data-zq');
                    $('#zq_low button').removeClass('active');
                    $(this).addClass('active');
                    chart_2.clear();
                    chart_2.setOption(chart_klines[zq_2]);
                });


                function fetchData_kline(frequency) {
                    $('#loading').loading({theme: 'dark'});
                    var post_data = back_config + '&frequency=' + frequency;
                    $.ajax({
                        type: "POST",
                        url: '/back/kline',
                        data: post_data,
                        success: function (result) {
                            if (result.length === 0) {
                                alert('结束')
                            } else {
                                chart_klines = (new Function("return " + result))();
                                chart_1.setOption(chart_klines[zq_1]);
                                chart_2.setOption(chart_klines[zq_2]);
                                $('#loading').loading('stop');
                            }
                        }
                    });
                }
            }
        );
    </script>
{% endblock %}